---
import "@styles/base.min.css"

import BaseLayout from "@layouts/BaseLayout.astro"
---

<BaseLayout title="Page Not Found!">
    <div class="not-found-wrapper">
        <span class="loader"></span>
        <h1 class="title"><span>四〇四</span> | 4 0 4 | <span>肆零肆</span></h1>
        <p class="desc">oops! page not found ~</p>
        <p class="desc">页面不存在，可能是访问页面参数错误，也可能是页面正在添加中......</p>
    </div>
</BaseLayout>

<style lang="scss" scoped>

    .not-found-wrapper {
        padding: 60px 40px 60px;
        --subColor1: #a69579;
        .title {
            margin-top: 10px;
            margin-bottom: 20px;
            font-weight: 800;
            font-size: var(--fontsTitle);
            line-height: 38px;
            text-align: center;
            color: var(--textColor1);
            span { 
                font-size: var(--fontsTitle);
                opacity: 1;
                transition: var(--baseTran);
            }
        }
        .desc {
            font-size: var(--fontsBase);
            line-height: 2;
            text-align: center;
            color: var(--textColor2);
        }
        .loader {
            margin: 0 auto 0;
            display: block;
            width: 160px;
            height: 160px;
            position: relative;
            background: var(--mainColor);
            border-radius: 100px 100px 0 0;
            &:after {
                content: "";
                position: absolute;
                width: 100px;
                height: 125px;
                left: 50%;
                top: 25px;
                transform: translateX(-50%);
                background-image: radial-gradient(circle, #000 48%, transparent 55%),
                    radial-gradient(circle, #000 48%, transparent 55%),
                    radial-gradient(circle, #fff 30%, transparent 45%),
                    radial-gradient(circle, #000 48%, transparent 51%),
                    linear-gradient(#000 20px, transparent 0),
                    linear-gradient(var(--subColor1) 60px, transparent 0),
                    radial-gradient(circle, var(--subColor1) 50%, transparent 51%),
                    radial-gradient(circle, var(--subColor1) 50%, transparent 51%);
                background-repeat: no-repeat;
                background-size: 16px 16px, 16px 16px, 10px 10px, 42px 42px, 12px 3px,
                    50px 25px, 70px 70px, 70px 70px;
                background-position: 25px 10px, 55px 10px, 36px 44px, 50% 30px, 50% 85px,
                    50% 50px, 50% 22px, 50% 45px;
                animation: faceLift 3s linear infinite alternate;
            }
            &:before {
                content: "";
                position: absolute;
                width: 140%;
                height: 125px;
                left: -20%;
                top: 0;
                background-image: radial-gradient(circle, var(--mainColor) 48%, transparent 50%),
                    radial-gradient(circle, var(--mainColor) 48%, transparent 50%);
                background-repeat: no-repeat;
                background-size: 65px 65px;
                background-position: 0px 12px, 145px 12px;
                animation: earLift 3s linear infinite alternate;
            }
        }
    }

    @keyframes faceLift {
        0% { transform: translateX(-60%) }
        100% { transform: translateX(-30%) }
    }
    @keyframes earLift {
        0% { transform: translateX(10px) }
        100% { transform: translateX(0px) }
    }

    @media screen and (max-width: 640px) {
        .not-found-wrapper .title span { font-size: 0; opacity: 0 }
    }
</style>